<template>
  <div class="ec-home pb-5" v-loading="loading" >
    <main>
      <!-- 企业banner，包含logo，企业名称，企业资质 -->
      <div class="jumbotron d-flex flex-column align-items-center">
        <div style="width: 80px;">
          <img :src="ec.enterpriseLogo" class="img-fluid" alt="" @click="$showImg(ec.enterpriseLogo)">
        </div>
        <h4 class="my-3">{{ec.enterpriseName}}</h4>
        <h6>企业资质：{{getEQ(ec.enterpriseQualification)}}</h6>
      </div>

      <!-- 企业标签 -->
      <div class="ec-tags" style="padding-top: 5px;">
        <!-- <label v-if="ec.tags.length > 0"><strong>企业标签:</strong>&nbsp;&nbsp;</label> -->
        <span :key="tag.tagId" class="badge mr-2"
        v-for="tag in ec.tags">{{tag.tagName}}</span>
      </div>

      <!-- 企业简介 -->
      <div class="ec-intro">
        <h4 class="text-center mt-5 mb-4">企业简介</h4>
        <p class="lead text-gray-700" style="margin-bottom: 36px;" v-html="replaceEnter(ec.enterpriseSummary)"></p>
      </div>

      <!-- 展示区域 -->
      <div class="ec-display">
        <div class="" v-if="ec.mscsProductDisplayList.length > 0">
          <h4 class="text-center mb-4 pt-5">产品展示</h4>
          <div class="card px-36 border-0" v-for="(item, index) in ec.mscsProductDisplayList" :key="index">
            <img class="card-img-top" :src="item.image" alt="Card image cap"  @click="$showImg(item.image)">
            <div class="card-body px-0">
              <h6 class="card-title fw-600">{{item.title}}</h6>
              <p class="text-gray-700" v-html="replaceEnter(item.content)"></p>
            </div>
          </div>
        </div>

        <!-- 专家 -->
        <div class="ec-enterprise" v-if="ec.mscsEnterpriseExpertList.length > 0">
          <h4 class="text-center mb-4 pt-5">企业专家</h4>
          <div class="card px-36 text-center border-0" v-for="(item, index) in ec.mscsEnterpriseExpertList" :key="index">
            <div class="mx-auto d-block img-enterprise">
              <img class="card-img-top" :src="item.image" alt="Card image cap" @click="$showImg(item.image)">
            </div>
            <div class="card-body px-0">
              <h6 class="card-title fw-600">{{item.expertName}}</h6>
              <p class="text-gray-700 text-left" v-html="replaceEnter(item.introduce)"></p>
            </div>
          </div>
        </div>

        <!-- 优质案例 -->
        <div v-if="ec.mscsBusinessCasesList.length > 0">
          <h4 class="text-center pt-5" style="margin-bottom: 4px;">优质案例</h4>
          <div class="card px-36 mt-2 border-0" v-for="(item, index) in ec.mscsBusinessCasesList" :key="index">
            <div class="card-body px-0" :class="{'border-bottom': index < ec.mscsBusinessCasesList.length - 1}">
              <h6 class="card-title fw-600">{{item.title}}</h6>
              <p class="text-gray-700" v-html="replaceEnter(item.content)"></p>
            </div>
          </div>
        </div>

        <!-- 解决方案 -->
        <div v-if="ec.mscsSolutionProgramList.length > 0">
          <h4 class="text-center pt-5" style="margin-bottom: 4px;">解决方案</h4>
          <div class="card px-36 mt-2 border-0" v-for="(item, index) in ec.mscsSolutionProgramList" :key="index">
            <div class="card-body px-0" :class="{'border-bottom': index < ec.mscsSolutionProgramList.length - 1}">
              <h6 class="card-title fw-600">{{item.title}}</h6>
              <p class="text-gray-700 text-left" v-html="replaceEnter(item.content)"></p>
            </div>
          </div>
        </div>
      </div>
      <!-- 企业荣誉 -->
      <div class="ec-honor" v-if="ec.mscsEnterpriseHonorList.length > 0">
        <h4 class="text-center my-3">企业荣誉</h4>
        <el-carousel  type="card" :autoplay="false" ref="carousel">
          <el-carousel-item v-for="(item, index) in ec.mscsEnterpriseHonorList" :key="index">
            <div class="card mt-2 border-0">
              <img class="card-img-top" :src="item.image" alt="Card image cap" @click="showCarouselImg(index, item.image)">
              <div class="card-body">
                <p v-html="replaceEnter(item.honorName)"></p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 企业联系方式 -->
      <div class="container mt-4 fz-14">
        <!-- <h2>联系我们</h2> -->
        <div class="row px-2 text-center">
          <div class="col-12">
            <label class="mb-0">联系人:</label>
            <span>{{ec.enterpriseContacts}}</span>
            &nbsp;&nbsp;&nbsp;
            <label class="mb-0">联系方式:</label>
            <span>{{ec.enterpriseContactsPhone}}</span>
          </div>
          <!-- <div class="col-12">

          </div> -->
          <div class="col-12">
            <label class="mb-0">企业邮箱:</label>
            <span>{{ec.email}}</span>
          </div>
          <div class="col-12">
            <label class="mb-0">企业地址:</label>
            <span>{{ec.cityName}}</span>
            <span>{{ec.enterpriseAddress}}</span>
          </div>
        </div>
      </div>


    </main>

    <div class="d-flex justify-content-between my-5 mr-3">
      <div class="text-gray-500">
        <!-- 企业主页没有阅读量 -->
        <!-- 阅读 {{ec.browseNumber}} -->
      </div>
      <div class="text-tdsuccess">
        <img src="../../assets/dianzan2.png" class="img-responsive" style="width: 20px;position: relative;top: -3px;" alt="">
        <span class="mr-2">{{ec.likeNumber}}</span>
      </div>
    </div>
    <!-- 评论展示区 -->
    <comments :info="ec.coms" class="px-3"></comments>
  </div>
</template>

<script>
import axios from 'axios'

let gen = async function (self, params) {
  // self.$message({
  //   showClose: true,
  //   message: `${params} - ${self.$route.params.id} - ${window.location}`,
  //   type: 'success'
  // })
  let obj = {enterpriseId: self.$route.params.id}
  // 获取企业内容
  let ec = await axios.post('/mscs/home/findEnterpriseContentById', self.$paramsConvert(obj))
  // 获取企业其他信息
  let ecChild = await axios.post('/mscs/home/findEnterpriseOtherData', self.$paramsConvert(obj))

  self.ec = Object.assign({}, self.ec, ec.data.data.data)
  self.ec.like = ec.data.data.like
  self.ec.likeNumber = ec.data.data.likeNumber
  self.ec.mscsProductDisplayList = ecChild.data.data.eroductDisplay
  self.ec.mscsEnterpriseExpertList = ecChild.data.data.enterpriseExpert
  self.ec.mscsEnterpriseHonorList = ecChild.data.data.enterpriseHonor
  self.ec.mscsSolutionProgramList = ecChild.data.data.solutionProgram
  self.ec.mscsBusinessCasesList = ecChild.data.data.businessCases
  self.ec.tags = JSON.parse(ec.data.data.data.tags)

  // 获取评论内容
  let resComment = await axios.post('/mscs/home/findCommentByType', self.$paramsConvert(obj))
  self.ec.coms = resComment.data.data
}

export default {
  name: "echome",
  title: "企业主页",
  data () {
    return {
      row: {},
      ec: {
        coms: [],
        tags: [],
        mscsProductDisplayList: [],
        mscsEnterpriseExpertList: [],
        mscsEnterpriseHonorList: [],
        mscsSolutionProgramList: [],
        mscsBusinessCasesList: []
      },
      loading: false,
    }
  },
  methods: {
    allGen () {
      this.loading = true
      gen(this).then().catch((err) => {
        this.$catchError(err)
      }).finally(() => {
        this.loading = false
      })

    },
    getEQ (str) {
      let eq = ''
      switch (str) {
        case 'A':
          eq = '甲级'
          break;
        case 'B':
          eq = '乙级'
          break;
        case 'C':
          eq = '丙级'
          break;
        case 'D':
          eq = '丁级'
          break;
        case 'N':
          eq = '非资质单位'
          break;
      }
      return eq
    },
    replaceEnter (str) {
      if (str) {
        return str.replace(/\n|\r\n/g,"<br/>")
      }
      return ''
    },
    showCarouselImg (index, url) {
      if (this.$refs.carousel.activeIndex === index) {
        this.$showImg(url)
      }
    }
  },
  mounted () {

  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      // vm.row = JSON.parse(to.query.row)
      vm.allGen()
    })
  }
}
</script>
<style lang='sass'>
  @import './style.scss'
</style>
